<template>
  <div class="app-container">
    <!--    <div v-if="user">-->
    <el-row :gutter="20">

      <el-col :span="6" :xs="24">
        <Sticky>
          <user-card :user="user" />
        </Sticky>
      </el-col>

      <el-col :span="18" :xs="24">
        <el-card>
          <el-tabs v-model="activeTab">
            <el-tab-pane label="文章" name="MyArticleList">
              <MyArticleList />
            </el-tab-pane>
            <el-tab-pane label="收藏" name="MyCollectionList">
              <MyCollectionList />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>

    </el-row>
    <!--    </div>-->
  </div>
</template>
<!--
user:
role: 1
userDescription: "hello world !"
userEmail: null
userFreeze: 0
userGender: null
userId: "1469202285186813954"
userName: "李四"
userPet: "LiMing"
userPhoto: "http://blogim.oss-cn-beijing.aliyuncs.com/my_file/774c58bd-7c94-4570-890b-e0dabd8062dc.jpeg"
userRegisterTime: "2021-15-10 15:08:16"
-->

<script>
import { getUserById } from '@/api/user'
import UserCard from './components/UserCard'
import MyArticleList from './components/MyArticleList'
import MyCollectionList from './components/MyCollectionList'
import Sticky from '@/components/Sticky'
export default {
  name: 'UserInfo',
  components: { Sticky, UserCard, MyArticleList, MyCollectionList },
  data() {
    return {
      userInfo: {},
      user: {},
      activeTab: 'MyArticleList'
    }
  },
  created() {
    const userId = this.$route.params && this.$route.params.id
    this.getUser(userId)
  },
  methods: {
    getUser(id) {
      getUserById(id)
        .then(res => {
          this.userInfo = res.data.user
          this.user = {
            name: this.userInfo.userName,
            role: this.userInfo.role === 1 ? 'user' : 'admin',
            email: this.userInfo.userEmail,
            avatar: this.userInfo.userPhoto,
            pet: this.userInfo.userPet,
            introduction: this.userInfo.userDescription
          }
        })
    }
  }
}
</script>

<style scoped>

</style>
